<template>
  <!-- 搜索框 -->
  <view class="searchContent">
    <!-- 搜索组件 -->
    <SearchGoodsM style="width: 98%;"></SearchGoodsM>
  </view>
  <!-- 轮播图 -->
  <view>
    <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="slideshow" :current="current" mode="round"
      :dots-styles="dotsStyles" field="content">
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
        <swiper-item v-for="(item, index) in slideshow" :key="index">
          <view class="swiper-item" :class="'swiper-item' + index">
            <image :src="getImgFullUrl(item.url)" style="width: 100%;" />
            <!-- <text style="color: #fff; font-size: 32px;">{{ index + 1 }}</text> -->
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>

  <!-- 商品分类 -->
  <view class="category">
    <navigator class="category-item" url="/pages/index/index" hover-class="none" v-for="item in goodsTypes"
      :key="item.key">
      <image src="" :class="'icon-sprite icon-' + item.key" />
      <text class="goods-classic-text">{{ item.value }}</text>
    </navigator>
  </view>
  <!-- 公告 -->
  <view>
    <uni-notice-bar show-icon text="uni-app 版平台。" />
  </view>

  <!-- 秒杀（集合存在时才出现，反之隐藏） -->
  <view>
    <uni-section title="秒杀活动" type="line" padding>
      <uni-list v-for="(item, index) in activeGoods " :key="item.id">
        <uni-list-item :title="item.name" :note="item.price" :thumb="getImgFullUrl(item.imgs)" thumb-size="lg"
          rightText="立即抢购" />
      </uni-list>
    </uni-section>
  </view>

  <!-- 每日上新 -->
  <view>
    <uni-section title="新品上架" type="line" padding>
      <!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
      <swiper class="daynew-swiper" :indicator-dots="false">
        <swiper-item class="daynew-swiper-item" style="width: 190px;" v-for="(item, index) in dayNewGoods" :index="index"
          :key="index">
          <uni-grid :column="1" :highlight="true" @change="changeNewGoodsList">
            <uni-grid-item>

              <image :src="getImgFullUrl(item.imgs)" class="daynew-item-img" mode="aspectFill" />
              <text class="">{{ item.name }}</text>
              <text class="">{{ item.price }}</text>

            </uni-grid-item>
          </uni-grid>
        </swiper-item>
      </swiper>
    </uni-section>
  </view>

  <!-- 大家想买 -->
  <view>
    <uni-section title="大家想买" type="line" padding>
      <!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
      <swiper class="daynew-swiper" :indicator-dots="false">
        <swiper-item class="daynew-swiper-item" style="width: 190px;" v-for="(item, index) in wantBuyGoods" :index="index" :key="index">
          <uni-grid :column="1" :highlight="true" @change="changeWantGoodsList">
            <uni-grid-item>
                <image :src="getImgFullUrl(item.imgs)" class="daynew-item-img" mode="aspectFill" />
                <text class="text">{{ item.name }}</text>
                <text class="text">{{ item.price }}</text>
            </uni-grid-item>
          </uni-grid>
        </swiper-item>
      </swiper>
    </uni-section>
  </view>

</template>


<script setup lang="ts">
import SearchGoodsM from '../commons/searchGoodsM.vue';

import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { getMapBy, readImgUrl } from "@/api/comm";
import type { iDictInfo } from "@/interface/";
import { getPackageList, getSeckillList, getWantBuyGoods, getDayNewGoods } from "@/api/shopping";



// 获取图片全路径  [错误写法：const getImgFullUrl = computed((imgName: string) => readImgUrl + imgName)   ]
const getImgFullUrl = computed(() => {
  return (imgName: string) => imgName ? readImgUrl + imgName : ''
})

// 轮播图集合(套餐信息)
const slideshow = reactive([{
  id: 0,
  imgs: '',
  code: '',
  name: '',
  price: 0.00,
  remark: '',
  buyNum: 0,
  packageFlag: 1,
  url: '',
  content: '',
}])

// 秒杀活动集合(商品信息)
const activeGoods = reactive([{
  id: 0,
  imgs: '',
  code: '',
  name: '',
  price: 0.00,
  buyNum: 0
}])

// 获取套餐信息（用于轮播图展示）
function getPacageList() {
  getPackageList()?.then((resp: any) => {
    if (0 == resp.code) {
      if (resp.data) {
        let packages: Array<any> = [];
        resp.data.forEach(element => {
          packages.push({
            "id": element.id, "code": element.code, "name": element.name, "price": element.price
            , "imgs": element.imgs, "buyNum": 0, "packageFlag": 1, "url": element.imgs, "content": element.name
          })
        });
        Object.assign(slideshow, packages)
      }
    }
  })
}

// 获取活动的商品信息（用于秒杀列表）
function getSeckillGoods() {
  getSeckillList()?.then((resp: any) => {
    if (0 == resp.code) {
      if (resp.data) {
        let activeGoodList: Array<any> = [];
        resp.data.forEach(item => {
          if (item.goodsVOList) {
            console.log(item.goodsVOList)
            item.goodsVOList.forEach(element => {
              activeGoodList.push({
                "id": element.id, "code": element.code, "name": element.name, "price": element.price
                , "imgs": element.imgs, "buyNum": 0
              })
            });
          }
        });
        Object.assign(activeGoods, activeGoodList)
      }
    }
  })
}



let swiperDotIndex = 0

function clickItem(e) {
  swiperDotIndex = e
}

// 轮播图-切换
function change(e) {
  current.value = e.detail.current
  console.log(current.value)
}


// 每日上新
const dayNewGoods = reactive([{
  id: 0,
  imgs: '',
  code: '',
  name: '',
  price: 0.00,
  discountPrice: 0.00,
  buyNum: 0
}])

// 大家想买
const wantBuyGoods = reactive([{
  id: 0,
  imgs: '',
  code: '',
  name: '',
  price: 0.00,
  discountPrice: 0.00,
  buyNum: 0
}])

// 每日上新
function getDayNewGoodsSearch() {
  getDayNewGoods()?.then((resp: any) => {
    if (0 == resp.code) {
      if (resp.data) {
        let itemList: Array<any> = [];
        resp.data.forEach(element => {
          itemList.push({
            "id": element.id, "code": element.code, "name": element.name, "price": element.price
            , "imgs": element.imgs, "buyNum": 0, "discountPrice": element.discountPrice
          })
        });
        Object.assign(dayNewGoods, itemList)
      }
    }
  })
}

// 大家想买
function getWantBuyGoodsSearch() {
  getWantBuyGoods()?.then((resp: any) => {
    if (0 == resp.code) {
      if (resp.data) {
        let itemList: Array<any> = [];
        resp.data.forEach(element => {
          itemList.push({
            "id": element.id, "code": element.code, "name": element.name, "price": element.price
            , "imgs": element.imgs, "buyNum": 0, "discountPrice": element.discountPrice
          })
        });
        Object.assign(wantBuyGoods, itemList)
      }
    }
  })
}

function changeNewGoodsList(e) {
  let {
    index
  } = e.detail
  this.list[index].badge && this.list[index].badge++

  uni.showToast({
    title: `点击第${index + 1}个宫格`,
    icon: 'none'
  })
}

function changeWantGoodsList(e) {
  let {
    index
  } = e.detail
  this.list[index].badge && this.list[index].badge++

  uni.showToast({
    title: `点击第${index + 1}个宫格`,
    icon: 'none'
  })
}


const current = ref(0) // let current = 0 [错误写法：不能实现双向绑定]
let dotsStyles = {
  backgroundColor: 'rgba(83, 200, 249,0.3)',
  border: '1px rgba(83, 200, 249,0.3) solid',
  color: '#fff',
  selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
  selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
}

// 商品类型
const goodsTypes = ref<iDictInfo[]>([]);

// 获取字典数据-商品类型
async function getDictMapBy() {
  const data = {
    'type': 11
  }
  await getMapBy(data)?.then((res: any) => {
    if (0 == res.code) {
      goodsTypes.value = res.data;
    }
  })
}

function search() {

}

// 页面加载
onLoad(() => {
  // 轮播图
  getPacageList();
  // 商品类型
  getDictMapBy();
  // 秒杀活动商品信息
  getSeckillGoods();
  // 每日上新
  getDayNewGoodsSearch();
  // 大家想买
  getWantBuyGoodsSearch();
})



</script>

<style lang="less" scoped>
.daynew-swiper {
  height: 200px;
}

.daynew-swiper-item {
  padding: 5px;
  border: none;
}

.daynew-item-img {
  // display: inline-block;
  width: 100%;
  height: 180px;
}

// #img{display:block;width:90px;height:100px;background:url('@/static/goodsTypeAll.png');}
/* 定义精灵图背景 */
.icon-sprite {
  background-image: url('@/static/goodsTypeAll.png');
  background-repeat: no-repeat;
  display: inline-block;
  height: 80px;
  /* 精灵图中图标的高度 */
  width: 80px;
  /* 精灵图中图标的宽度 */
  margin: 0 5px;
}

/* 定义每个图标的背景位置 */
.icon-1 {
  background-position: -37px -18px;
  /* 左上角 */
}

.icon-2 {
  background-position: -186px -18px;
  /* 左起第二个图标位置 */
}

.icon-3 {
  background-position: -334px -18px;
  /* 左起第三个图标位置 */
}

.icon-4 {
  background-position: -37px -167px;
  /* 左起第四个图标位置 */
}

.icon-5 {
  background-position: -185px -165px;
  /* 左起第五个图标位置 */
}

.icon-6 {
  background-position: -335px -167px;
  /* 左起第六个图标位置 */
}

/* 商品分类 */

.goods-classic-text {
  margin-left: 10px;
}

.category {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px;
  display: flex;
  flex-wrap: wrap;
  min-height: 158px;
}

.category-item {
  width: 22%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.icon {
  width: 50px;
  height: 50px;
}

.text {
  font-size: 8px;
  color: #666;
}

/* 搜索框 */
// .searchContent {
//   display: flex;
//   // flex-direction: column;
//   // align-items: center;
//   // justify-content: center;
//   // width: 100%;
// }

.logo {
  height: 100px;
  width: 100px;
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}


/* 轮播图 */
.swiper-box {
  height: 200px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #fff;
}

.swiper-item0 {
  background-color: #cee1fd;
}

.swiper-item1 {
  background-color: #b2cef7;
}

.swiper-item2 {
  background-color: #cee1fd;
}

.image {
  width: 750rpx;
}

.uni-swiper-dot-box {
  margin: 0 5px;
  margin-bottom: 8px;
}

.image {
  width: 100%;
}

.uni-bg-red {
  background-color: #ff5a5f;
}

.uni-bg-green {
  background-color: #09bb07;
}

.uni-bg-blue {
  background-color: #007aff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: 20rpx;
}

.example-body-item {

  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 15rpx;
  padding: 15rpx;
  height: 60rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  padding: 0 15rpx;
  /* #endif */
  flex: 1;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.example-body-item-text {
  font-size: 28rpx;
  color: #333;
}

.example-body-dots {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50px;
  background-color: #333333;
  margin-left: 10rpx;
}

.active {
  border-style: solid;
  border-color: #007aff;
  border-width: 1px;
}
</style>
